<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>库存盘点</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="stock-taking">
      <search-btn-view btn-text="成品库存查询" @before-open="resetSearch" @search="searchData">
        <template slot="append" v-if="selectWarehouses.length>0">
          <el-button type="primary" size="medium" @click="warehouseTaking(false)">库存盘点</el-button>
          <el-button type="primary" size="medium" @click="warehouseTaking(true)" :disabled="!selfApprovalPermission">
            审核过账
          </el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="stock-taking-table-div">
        <el-table fit stripe border :data="warehouseList" style="width:100%;" height="parent" ref="stockTakingTable"
          @row-click="tableRowClick" @selection-change="selectStockTaking">
          <el-table-column fixed :resizable="false" column-key="selection" type="selection"
            :selectable="tableSelectableFun" width="40" align="center"></el-table-column>
          <el-table-column sortable prop="orderId" label="系统订单编号" min-width="130px" header-align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.orderId!==''" class="table-btn" @click="lookProWarehouseDetail(scope.row)">
                {{scope.row.orderId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="companyOrderId" label="公司订单编号" min-width="130px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="factoryNo" label="工厂型号" min-width="125px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="customerNo" label="客户型号" min-width="125px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="rowIndex" label="订单序号" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.rowIndex===-1?globalConfig.orderDefaultRowIndex:scope.row.rowIndex}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip sortable prop="count" column-key="count" label="合格数" width="120px"
            header-align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit">
                <div style="width:65%">{{scope.row.count}}</div>
                <div>{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit">
                  <div style="width:65%">{{scope.row.count}}</div>
                  <div>{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip sortable prop="noCount" column-key="noCount" label="不合格数" width="120px"
            header-align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit">
                <div style="width:65%">{{scope.row.noCount}}</div>
                <div>{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit">
                  <div style="width:65%">{{scope.row.noCount}}</div>
                  <div>{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" column-key="takingCount" label="数量" width="140px" align="center">
            <template slot-scope="scope">
              <el-input-number size="mini" v-model="scope.row.takingCount" :min="0" :max="9999999999" :precision="2"
                :controls="false" placeholder="请输入数量" @change="handleTakingCountChange(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" column-key="profitCount" label="盈亏情况" width="90px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.takingCount!==undefined">
                {{getProfitCount(scope.row)}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>

      <el-dialog :title="dialogTitle" :visible.sync="openDialog" width="80%" top="10vh"
        custom-class="query-warehouse-dialog" @closed="dialogColsed">
        <div style="height:calc(80vh - 64px);overflow:auto;padding:0 10px 10px">
          <component v-if="openDialog&&dialogComp!==null" :is="dialogComp" :warehouse="selectWarehouse"></component>
        </div>
      </el-dialog>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);
</script>
<script src="./searchForm.js"></script>
<script src="../queryWarehouse/productionUnitInfo.js"></script>
<script src="../queryWarehouse/prouctionOrderInfo.js"></script>
<script src="../queryWarehouse/warehouseInfoRecord.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        isValid: '',
        orderId: '',
        companyOrderId: '',
        factoryNo: '',
        customerNo: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        warehouseList: [],
        selfApprovalPermission: false,
        selectWarehouse: null,
        openDialog: false,
        dialogTitle: '',
        dialogComp: null,
        selectWarehouses: []
      };
    },

    created: function () {
      this.setWarehouseList(true);
      this.checkApprovalPermission();
    },

    methods: {
      //校验是否有对应的审核权限
      checkApprovalPermission: function () {
        var self = this;
        return PermissionUtil.ajaxCheckPermission(6).then(function (hasApproval) {
          self.selfApprovalPermission = hasApproval;
          return hasApproval;
        });
      },
      setWarehouseList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize,
          warehouseType: 1
        };

        var search = this.search;
        var fields = ['orderId', 'companyOrderId', 'factoryNo', 'customerNo', 'isValid'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest("companyMaterialCount/getCompanyMaterialCountList", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var warehouseList = res.returnData;
          for (var i = 0; i < warehouseList.length; i++) {
            var warehouse = warehouseList[i];
            warehouse.hasProduction = warehouse.productionUnitCount > 0 ||
              warehouse.productionUnitNoCount > 0;

            warehouse.takingCount = undefined;
          }

          self.warehouseList = warehouseList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setWarehouseList(true);
      },

      pageChange: function () {
        this.setWarehouseList();
      },

      tableRowClick: function (warehouse, column) {
        var columnKey = column.columnKey;
        var fields = ['count', 'noCount', 'takingCount', 'profitCount', 'selection'];
        if (fields.indexOf(columnKey) !== -1) {
          return;
        }

        this.lookWarehouseInoutRecord(warehouse);
      },

      lookWarehouseInoutRecord: function (warehouse) {
        this.selectWarehouse = warehouse;
        this.dialogTitle = '出入库记录';
        this.dialogComp = 'warehouse-info-record';
        this.openDialog = true;
      },

      lookProWarehouseDetail: function (warehouse) {
        if (SysUtil.isEmpty(warehouse.rowIndex)) {
          this.$alert('订单序号为空', '信息');
          return;
        }

        this.selectWarehouse = warehouse;
        this.dialogTitle = '成品报工订单信息';
        this.dialogComp = 'prouction-order-info';
        this.openDialog = true;
      },

      dialogColsed: function () {
        this.selectWarehouse = null;
        this.dialogTitle = '';
        this.dialogComp = null;
      },

      tableSelectableFun: function (warehouse) {
        var takingCount = warehouse.takingCount;
        if (takingCount === undefined) {
          return false;
        }

        return takingCount - warehouse.count !== 0;
      },

      selectStockTaking: function (selectWarehouses) {
        this.selectWarehouses = selectWarehouses;
      },

      handleTakingCountChange: function (warehouse) {
        if (this.tableSelectableFun(warehouse)) {
          return;
        }
        this.$refs['stockTakingTable'].toggleRowSelection(warehouse, false);
      },

      warehouseTaking: function (isAduit) {
        var selectWarehouses = this.selectWarehouses;
        if (selectWarehouses.length === 0) {
          this.$alert('请选择需要盘点的成品', '信息');
          return;
        }

        var postData = [];
        for (var i = 0; i < selectWarehouses.length; i++) {
          var warehouse = selectWarehouses[i];
          var takingCount = warehouse.takingCount;
          if (takingCount === undefined) {
            this.$alert('请输入数量', '信息')
            return;
          }

          var count = warehouse.takingCount - warehouse.count;
          var type;
          if (count < 0) {
            type = 12;
          } else {
            type = 11;
          }

          postData.push({
            orderId: warehouse.orderId,
            rowIndex: warehouse.rowIndex,
            warehouseType: warehouse.warehouseType,
            noCount: warehouse.noCount,
            type: type,
            count: Math.abs(count)
          });
        }

        this.loading = true;
        var self = this;
        ajaxRequest('warehouse/materialStockTaking', {
          jsonArray: JSON.stringify(postData),
          isAduit: isAduit
        }).then(function (msg) {
          self.$alert('库存盘点成功', '信息', {
            callback: function () {
              self.setWarehouseList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getProfitCount:function(warehouse){
        var profitCount = warehouse.takingCount - warehouse.count;
        return _.round(profitCount, 2);
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ProductionUnitInfo: ProductionUnitInfo,
      ProuctionOrderInfo: ProuctionOrderInfo,
      WarehouseInfoRecord: WarehouseInfoRecord
    }
  });
</script>
<style>
  .stock-taking {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .stock-taking .stock-taking-table-div {
    flex: 1;
    overflow: auto;
  }

  .stock-taking .stock-taking-table-div .table-count-unit {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stock-taking .stock-taking-table-div .table-count-unit>div {
    display: inline-block;
  }

  .stock-taking .table-btn {
    color: #409EFF;
    cursor: pointer;
  }
</style>

</html>